<template>
  <div class="work-station" :style="{ padding: showGraphEditor ? '0' : '20px' }">
    <template v-if="!showGraphEditor">
        <a-input placeholder="请输入关键词" v-model="searchForm.templateCode" clearable style="width: 400px" />
        <a-button type="primary" @click="getTplList" style="margin-left: 10px" 
        >
          搜索
        </a-button>
        <a-button type="default" @click="resetTplList" style="margin-left: 10px">重置</a-button>
        <a-button type="default" @click="addTpl" style="margin-left: 10px">新建模板</a-button>
        <a-table :columns="tableColumns" :data-source="tableData" style="width: 100%; margin-top:20px;" :pagination="false">
          <template slot="wh" slot-scope="text, record">
              {{ record.width }} * {{ record.height }}
          </template>
          <template slot="type" slot-scope="text, record">
            {{ typeMap[record.type] }}
          </template>
          <template slot="operator" slot-scope="text, record">
              <a style="cursor: pointer" @click="createGraph(record)">进入画布</a>
              <a style="cursor: pointer; margin-left: 10px;" @click="editTpl(record)">修改模板</a>
              <a style="cursor: pointer; margin-left: 10px;" @click="copyTpl(record)">复制</a>
              <a style="cursor: pointer; margin-left: 10px;" @click="delTpl(record)">删除模板</a>
          </template>
        </a-table>
        <a-pagination
          v-model="pagination.currentPage"
          show-size-changer
          :total="totalItems"
          :page-size.sync="pagination.pageSize"
          show-less-items
          @change="handleCurrentChange"
          @showSizeChange="handleSizeChange"
          style="text-align: right;margin-top: 10px;"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination>
    </template>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="closeDialog"
      v-if="!showGraphEditor"
    >
      <el-form :model="form">
        <el-form-item label="模板code" :label-width="formLabelWidth">
          <el-input v-model="form.templateCode" autocomplete="off" :disabled="form.id"></el-input>
        </el-form-item>
        <el-form-item label="模板名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价签类型" :label-width="formLabelWidth">
          <el-select v-model="form.screenSize" style="width: 100%;" @change="changeScreenSize">
            <el-option
              :label="item.label"
              :value="item.label"
              v-for="item in screenSize"
              :key="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="画布大小" :label-width="formLabelWidth">
          <el-select v-model="form.graphSize" style="width: 100%;">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in graphSize[form.screenSize] || []"
              :key="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色" :label-width="formLabelWidth">
          <el-select v-model="form.graphColor" style="width: 100%;">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in graphColor"
              :key="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirmCreate">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="copyModal"
      width="800px"
      :before-close="closeCopyModal"
      v-if="!showGraphEditor"
    >
      <el-form :model="copyForm">
        <el-form-item label="原模板名称" :label-width="formLabelWidth">
          <el-input v-model="copyForm.templateCode" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="新模板名称" :label-width="formLabelWidth">
          <el-input v-model="copyForm.newTemplateCode" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCopyModal">取 消</el-button>
        <el-button type="primary" @click="confirmCopy">确 定</el-button>
      </span>
    </el-dialog>

    <GraphEditor v-if="showGraphEditor" :params="form" @close="closeGraph" />
  </div>
</template>

<script>
import axios from "@/utils/request";
import GraphEditor from "@/components/graph/index.vue";
export default {
  components: {
    GraphEditor,
  },
  data() {
    return {
      tableData: [], //模板列表
      showGraphEditor: false,
      dialogVisible: false, //弹窗是否可见
      formLabelWidth: "120px",
      searchForm: {}, //搜索表单
      form: {}, //创建graph的表单,弹窗表单
      tableColumns: [
        {
          title: '模板code',
          dataIndex: 'templateCode',
          key: 'templateCode',
        },
        {
          title: '模板名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '尺寸',
          dataIndex: 'size',
          key: 'size',
        },
        {
          title: '宽高',
          dataIndex: 'wh',
          key: 'wh',
          scopedSlots: { customRender: 'wh' },
        },
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '操作',
          dataIndex: 'operator',
          key: 'operator',
          fixed: 'right',
          width: 300,
          scopedSlots: { customRender: 'operator' },
        }
      ],
      // 分页相关
      totalItems: 0, // 总条数
      pagination: {
        currentPage: 1,
        pageSize: 10
      },

      // 复制表单
      copyForm: {
        templateCode: '',
        newTemplateCode: ''
      },
      copyModal: false,
      // 复制表单结束

      // 屏幕大小, 英寸
      screenSize: [
        { label: 1.54 },
        { label: 2.13 },
        { label: 2.4 },
        { label: 2.6 },
        { label: 2.9 },
        { label: 3.46 },
        { label: 3.5 },
        { label: 3.7 },
        { label: 4.2 },
        { label: 4.37 },
        { label: 5.65 },
        { label: 5.8 },
        { label: 7.5 },
        { label: 11.6 },
        { label: 20 },
      ],

      graphSize: {
        1.54: [
          { label: "152 * 152", value: "152,152" },
          { label: "200 * 200", value: "200,200" },
        ],
        2.13: [
          { label: "212 * 104", value: "212,104" },
          { label: "250 * 122", value: "250,122" },
        ],
        2.4: [
          { label: "320 * 240", value: "320,240" },
        ],
        2.6: [
          { label: "360 * 184", value: "360,184" },
          { label: "296 * 152", value: "296,152" },
        ],
        2.9: [
          { label: "384 * 168", value: "384,168" },
          { label: "296 * 128", value: "296,128" },
        ],
        3.46: [
          { label: "480 * 176", value: "480,176" },
        ],
        3.5: [
          { label: "384 * 184", value: "384,184" }
        ],
        3.7: [
          { label: "416 * 240", value: "416,240" }
        ],
        4.2: [
          { label: "300 * 400", value: "300,400" }
        ],
        4.37: [
          { label: "480 * 176", value: "480,176" }
        ],
        5.65: [
          { label: "600 * 448", value: "600,448" }
        ],
        5.8: [
          { label: "480 * 648", value: "480,648" },
          { label: "480 * 765", value: "480,765" },
          { label: "256 * 768", value: "256,768" }
        ],
        7.5: [
          { label: "384 * 640", value: "384,640" },
          { label: "528 * 880", value: "528,880" },
          { label: "480 * 800", value: "480,800" }
        ],
        11.6: [{ label: "640 * 960", value: "640,960" }],
        20: [{ label: "800 * 272", value: "800,272" }],
      },

      graphColor: [
        { label: "黑白", value: 0 },
        { label: "黑白红", value: 1 },
        { label: "黑白黄", value: 2 },
      ],
    };
  },
  computed: {
    typeMap() {
      return {
        0: "黑白",
        1: "黑白红",
        2: "黑白黄",
      };
    },
  },
  mounted() {
    this.getTplList();
  },
  methods: {
    searchTpl() {
      // 如果有搜索框有值，那么就根据码值获取列表，没有值
    },
    // 获取模板列表
    async getTplList() {
      let data = await axios({
        url: "/template",
        method: "get",
        params: {
          ...this.searchForm,
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
        },
      });
      console.error("模板列表是", data);
      this.tableData = data.data.records;
      this.totalItems = data.data.total;
    },
    async copyTpl(record) {
      this.copyModal = true;
      this.copyForm.templateCode = record.templateCode;
      this.copyForm.newTemplateCode = '';
    },
    closeCopyModal() {
      this.copyModal = false;
    },
    async confirmCopy() {
      let data = await axios({
        url: "/template/copy",
        method: "post",
        data: {
          ...this.copyForm,
        },
      });
      this.copyModal = false;
      this.getTplList();
    },
    async delTpl(record) {
      this.$confirm({
        title: '提示',
        content: `确定要删除${record.templateCode}?`,
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          await axios({
            url: `/template/${record.templateCode}`,
            method: "delete",
          });
          this.$message.success('删除成功');
          this.getTplList();
        }
      })
    },
    handleSizeChange(val, pageSize) {
      this.pagination.pageSize = pageSize;
      this.getTplList();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getTplList();
    },
    resetTplList() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.searchForm = {};
        this.getTplList();
    },
    addTpl() {
        this.form = {};
        this.dialogVisible = true;
    },
    changeScreenSize() {
      if (this.graphSize[this.form.screenSize].length > 0) {
        this.form.graphSize = this.graphSize[this.form.screenSize][0].value;
      }
    },
    async confirmCreate() {
        let { graphSize = '' } = this.form;
        console.error("画布大小", graphSize);
        let speratorIdx = graphSize.indexOf(',');
        let canvasWidth = 0, canvasHeight = 0;
        if ( speratorIdx != -1 ) {
            canvasWidth = graphSize.slice(0, speratorIdx);
            canvasHeight = graphSize.slice(speratorIdx + 1);
        }
        let data = await axios({
            url: '/template',
            method: 'post',
            data: {
                "id": this.form.id,
                "templateCode": this.form.templateCode,
                "size": this.form.screenSize,
                "width": canvasWidth,
                "height": canvasHeight,
                "type": this.form.graphColor,
                "name": this.form.name
            }
        });
        this.closeDialog();
        this.getTplList();
    },
    closeDialog() {
      this.dialogVisible = false;
      this.form = {};
    },

    createGraph(record) {
        this.showGraphEditor = true;
        this.form = record;
    },
    editTpl(record) {
        this.dialogVisible = true;
        this.form = {
            ...this.form,
            id: record.id,
            templateCode: record.templateCode,
            screenSize:  + record.size,
            graphSize: `${ record.width },${ record.height }`,
            graphColor: record.type
        }
    },

    closeGraph() {
        this.showGraphEditor = false;
        this.getTplList();
    }
  },
};
</script>

<style scoped>
.work-station {
  padding: 20px;
}
</style>